@for (character of characters(); track character) {
  <button
    #characterBtn
    type="button"
    [disabled]="isDisabled()"
    (click)="updateCharacterSelection(character)"
    class="flex flex-col items-center rounded-md border p-2 relative"
    [class.selected]="
      !isDisabled() && selectedCharacter() === character
    "
    (mouseover)="
      !isDisabled() && characterBtn.classList.add('hovered')
    "
    (mouseout)="
      !isDisabled() &&
        characterBtn.classList.remove('hovered')
    "
  >
    @if (
      !isDisabled() && selectedCharacter() === character
    ) {
      <svg
        @selected
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="20"
        height="20"
        class="absolute -top-2 -right-2"
      >
        <path fill="none" d="M0 0h24v24H0z" />
        <path
          fill="#4a00ff"
          d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"
        />
        <path
          d="M11.003 16l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"
          fill="#fff"
        />
      </svg>
    }
    <figure>
      <img
        ngSrc="/characters/{{ character }}.webp"
        width="70"
        height="70"
        alt="{{ character }}"
      />
    </figure>
    <p class="text-xs text-gray-700 mt-1">
      {{ character }}
    </p>
  </button>
}
